<template>
  <transition name="down">
    <div class="message" v-if="isShow">
      <div class="m-i">
        <i class="iconfont" :class="style[type].icon"></i>
        <span class="text"> {{ message }} </span>
      </div>
    </div>
  </transition>
</template>

<script setup>
import { ref, defineProps, onMounted } from 'vue'

const props = defineProps({
  message: {
    type: String,
    default: '',
  },
  type: {
    type: String,
    // success 成功  error 失败  warning 警告 
    default: 'success',
  },
})

const style = {
  warning: {
    icon: 'icon-xinxitishi',
  },
  error: {
    icon: 'icon-guanbi',
  },
  success: {
    icon: 'icon-chenggong',
  },
}

const isShow = ref(false)

onMounted(() => {
  isShow.value = true
  setTimeout(() => {
    isShow.value = false
  }, 3000)
})

</script>

<style lang="less" scoped>
.down {
  &-enter {
    &-from {
      transform: translateY(-30px);
      opacity: 0;
    }
    &-active {
      transition: all 0.3s ease;
    }
    &-to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  &-leave {
    &-from {
      transform: translateY(0);
      opacity: 1;
    }
    &-active {
      transition: all 0.3s ease;
    }
    &-to {
      transform: translateY(-30px);
      opacity: 0;
    }
  }
}
.message {
    width: 100%;
    height: 40px;
    position: fixed;
    z-index: 9999;
    top: 20px;
    line-height: 40px;
    display: flex;
    justify-content: center;

    .m-i {
      padding: 0 20px;
      border-radius: 8px;
      background-color: #fff;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }

    i {
      margin-right: 6px;
      vertical-align: middle;
    }

    .text {
      vertical-align: middle;
    }

    .icon-chenggong {
      color: @primary-color;
    }
    .icon-xinxitishi {
      color: @warning-color;
    }
    .icon-guanbi {
      color: @error-color;
    }
  }

</style>
